---
layout: blank
title: Cursors
---

<style>
  .cursor-list,
  .cursor-list-with-pointer {
    display: flex;
    padding: 15px;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: black;
  }

  .cursor-list img {
    padding: 5px;
    flex-basis: 32px;
  }
</style>

<p>
  By default, cursors are disabled. To enable them, set the `showSVGCursors`
  option to `true` when initializing `cornerstoneTools`.
</p>

{% highlight javascript %}
cornerstoneTools.init({
  showSVGCursors: true,
});
{% endhighlight %}

<h3 class="title is-3">Access Cursor Images</h3>

{% highlight javascript %}
// Grab a cursor
const cursors = cornerstoneTools.import('tools/cursors');
const cursor = cursors.arrowAnnotateCursor; // `MouseCursor` class

// Create and display cursor image
const cursorImg = document.createElement('img');
const cursorImgUrl = window.URL.createObjectURL(cursor.iconSVG);

cursorImg.src = cursorImgUrl;
document.querySelector('body').appendChild(cursorImg);

// Create and display cursor image w/ pointer
const cursorImgPointer = document.createElement('img');
const cursorImgPointerUrl = window.URL.createObjectURL(cursor.blob);

cursorImgPointer.src = cursorImgPointerUrl;
document.querySelector('body').appendChild(cursorImgPointer);
{% endhighlight %}

<h4 class="title is-4">Cursors w/o Pointers</h4>

<div class="cursor-list"></div>

<h4 class="title is-4" style="margin-top: 1.5em;">Cursors w/ Pointers</h4>

<div class="cursor-list-with-pointer"></div>

<script>
  // NOTE: We pull these in from packaged sources in our header,
  // but here are the associated NPM packages that can be used instead

  // Packages
  // import Hammer from 'hammerjs';
  // import dicomParser from 'dicom-parser';
  // import * as cornerstone from 'cornerstone-core';
  // import * as cornerstoneMath from 'cornerstone-math';
  // import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
  // import * as cornerstoneTools from '@cornerstonejs/tools';

  const baseUrl =
    window.ENVIRONMENT === 'development'
      ? 'http://127.0.0.1:4000/'
      : 'https://tools.cornerstonejs.org/examples/';

  _initCornerstone();
  _initInterface();

  const element = document.querySelector('.cornerstone-element');

  // Init CornerstoneTools
  cornerstoneTools.init({
    showSVGCursors: true,
  });
  cornerstone.enable(element);
  const imageIds = [
    `wadouri:${baseUrl}assets/dicom/exotic/1.dcm`,
    `wadouri:${baseUrl}assets/dicom/exotic/2.dcm`,
  ];

  element.tabIndex = 0;
  element.focus();

  cornerstone.loadImage(imageIds[0]).then(function(image) {
    cornerstone.displayImage(element, image);
  });

  // Add the tool
  const RectangleRoiTool = cornerstoneTools.RectangleRoiTool;
  cornerstoneTools.addTool(RectangleRoiTool);
  cornerstoneTools.setToolActive('RectangleRoi', { mouseButtonMask: 1 });

  // Grab all SVGs
  const MouseCursor = cornerstoneTools.import('tools/cursors/MouseCursor');
  const cursors = cornerstoneTools.import('tools/cursors');
  const $cursorList = document.querySelector('.cursor-list');
  const $cursorListWithPointer = document.querySelector(
    '.cursor-list-with-pointer'
  );

  Object.keys(cursors).forEach(cursorName => {
    const cursor = cursors[cursorName];

    // Create cursor image from blob
    const imageUrl = window.URL.createObjectURL(cursor.iconSVG);
    const img = document.createElement('img');

    img.src = imageUrl;
    img.alt = cursorName;
    $cursorList.appendChild(img);

    // Create cursor + pointer image from blob
    const imageUrl2 = window.URL.createObjectURL(cursor.blob);
    const img2 = document.createElement('img');

    img2.src = imageUrl2;
    img2.alt = cursorName;
    $cursorListWithPointer.appendChild(img2);

    // window.URL.revokeObjectURL(imageUrl);
  });

  /***************************************************************************
   * UI & Boilerplate setup code
   **************************************************************************/

  /***
   *
   *
   */
  function _initCornerstone() {
    // Externals
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.Hammer = Hammer;

    // Image Loader
    const config = {
      webWorkerPath: `${baseUrl}assets/image-loader/cornerstoneWADOImageLoaderWebWorker.js`,
      taskConfiguration: {
        decodeTask: {
          codecsPath: `${baseUrl}assets/image-loader/cornerstoneWADOImageLoaderCodecs.js`,
        },
      },
    };
    cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
  }

  /***
   *
   *
   */
  function _initInterface() {}
</script>
